鼓起勇氣挑一個沒有接觸過的 ReactJS 來挑戰
希望在這30天內可以盡最大所能挖掘 React 的奧秘！

作品懶人包
由於我喜歡嘗試各種新的可能
因此在這30天內我規劃透過 React 寫出10個練習
(不知道真的寫得出來的有幾個XD 也很有可能做到一半又蹦出新的idea說不定。。。)

• React 日曆
• 個人電子名片
• Color picker-你喜歡什麼顏色的氣球
• 動態信用卡卡號輸入
• Pomodoro Timer 番茄工作鐘
• 產品搜尋應用程式
• Super Squad
• Meme Generator
• Memo board 備忘錄
• Zoo 動物導覽預約系統

30天的學習歷程大致規劃：

• What is React?
• Setup workspace with webpack
• React Components and Rendering
• Application Data
• Events and Data Changes in React
• React Router
• React Router Params and Queries
• Single Page Apps with React JS
• React Inline Styles
• Component Arrays
• React Flux
• Flux Store Event
• The Flux Dispatcher
• Flux actions
• Asynchronous & AJAX Flux Actions
• React & Flux Memory Leaks
• Hello Redux
• Immutable JS
• How Redux Work
• Multiple Reducers with Redux Reducers
• Redux Middleware
• Redux Async Actions
• Connecting React and Redux

什麼是 React? React 是什麼？

A JavaScript library for building user interface.

React 的簡介

React JS 是 facebook 開發的一個 JS 函式庫，負責產生與管理前端的 UI，方便使用者重複使用網頁上的 Components。當資料更新的時候，React 可以自動控制 UI 的更新，只知道只要更新有修改的部分。React 是透過把介面拆解成一個個 component 的方式來組織使用者介面。

React 的真面目

React 不是一個框架，它大約只能稱為函式庫
（愚蠢的我一直以為它是框架）

React 專注在 MVC 的 VIEW 層級。

React 原理

Virtual DOM
以往要更新 web DOM 的話，是直接操作更新的。而 React 想盡可能減低對 DOM 的操作來提高效能，因此提供了另一種不同於傳統的更新 DOM 方式，就是虛擬 DOM。
這個虛擬 DOM 記錄真實 DOM 該有的五官與長相，最後透過虛擬 DOM 來更新真實的 DOM。而 React 透過diff 算法，來控制什麼時候要更新真實 DOM，所以 DOM 並非時時刻刻更新，而是 React 在事件循環結束之後，重新計算 diff，參照現有的 DOM，計算出最少的步驟更新真實的 DOM。

React 特色

• 透過 JavaScript 產生 components
• 即時監聽使用者的行為
• 動態顯示網頁的內容
• 在任何你所期望的時機更新 UI

透過 React，我們就不需要再跟 Server 溝通，從後端產生 HTML。簡單來說， React 就是只專注於呈現 MVC 中的 View，React 是一個用來產生使用者介面的 JavaScript 函式庫。

用 React 操作 View 層級的優點

• 網頁跑的速度更快
• 較佳的關注點分離(Separation of concerns，SOC)
• 前端的程式碼 重複使用性高

Angular v.s React

Angular
- Angular 可以做 Single Web Page
- 有 Router
- 表單驗證機制
- Angular 控制完整的用戶體驗、控制不同頁面的切換、控制所有使用者的行為

Angular 是 Server 只傳送一個 View

相反的，你如果要透過 React 實作 Single Web Page 你必須擴增其他 package，因為 React 最核心的價值是剛剛所提到的「建立 Views 或是單一組件」。

使用 React 的網頁

• Netflix
• paypal
• imgur
• Feedly

當我們要製作一個大型網站，舉 Facebook 為例，這個頁面就包含了粉絲專頁名稱、sidebar、navbar、貼文、紛絲頁資訊、聊天室⋯⋯等。當網站越來越多，程式就會越來越冗長而不易閱讀，我們要避免義大利麵般ㄍㄡˊㄍㄡˊ迪的程式碼，因此。React 就是用來產生 User Interface 的最佳利器。

React 沒做的事

React 沒做的事就是 Store data，資料可能是從資料庫來或者是從 api 呼叫，React 則是負責 View laywer，它只負責前端樣式以及產生介面